import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { ApproveBlock, Header, TextLine, TextCell, Split } from '@components/ApprovePre/Approve'
import { Button, Space } from 'antd'
import { download } from '@js/downloadRename'
import { strToNum } from '@src/assets/js/tool'
export default class BillTextBlock extends Component {
  formRef = React.createRef()
  // 格式化时间
  formatDate (d) {
    d = strToNum(d)
    if (d) {
      return moment(d * 1000).format('YYYY-MM-DD')
    }
    return '无'
  }

  // 渲染文件链接
  renderLinks (list) {
    return list.map((li, i) => {
      return <a style={{ marginRight: '8px' }} key={i} onClick={() => download(li.path, li.original_filename)}>{li.original_filename}</a>
    })
  }

  // 渲染文件
  renderFile (file) {
    if (!file || !file.length) {
      return false
    }
    return (
      <TextLine>
        <TextCell>交费凭证：{this.renderLinks(file)}</TextCell>
      </TextLine>
    )
  }

  // 渲染实际支付情况
  renderPay (d) {
    if (d.status !== '完成') {
      return null
    }
    return (
      <>
        <TextLine>
          <TextCell>实际支付者：{d.payer_actual || '无'}</TextCell>
          <Split />
          <TextCell>交费单号：{d.platform_serialno || '无'}</TextCell>
          <Split />
          <TextCell>实际支付日期：{this.formatDate(d.pay_datetime)}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell>实际支付金额：{d.pay_amount || '无'}</TextCell>
          <Split />
          <TextCell>备注：{d.remark || '无'}</TextCell>
          <Split />
        </TextLine>
      </>
    )
  }

  // 渲染操作按钮
  renderOperateBtn (d) {
    const { editable } = this.props
    return (
      <TextLine>
        <TextCell style={{ width: '100%', textAlign: 'right' }}>
          <Space>
            {d.status === '进行中' ? <Button disabled={!editable} onClick={() => this.props.modifyHandle(d)}>修改交费单</Button> : null}
            {d.status !== '完成' ? <Button type='primary' ghost disabled={!editable} onClick={() => this.props.decideHandle(d)}>确定交费</Button> : null}
          </Space>
        </TextCell>
      </TextLine>
    )
  }

  render () {
    const { data: d } = this.props
    return (
      <ApproveBlock>
        <Header title='交费单' />
        <TextLine>
          <TextCell>交费单类型：{d.type || '无'}</TextCell>
          <Split />
          <TextCell>交费状态：{d.status || '无'}</TextCell>
          <Split />
          <TextCell>交费金额：{d.amount || '无'}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell>受理费：{d.fee_acceptance || '无'}</TextCell>
          <Split />
          <TextCell>处理费：{d.fee_processing || '无'}</TextCell>
          <Split />
          <TextCell>其他费用：{d.fee_other || '无'}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell>支付人：{d.payer || '无'}</TextCell>
          <Split />
          <TextCell>创建日期：{this.formatDate(d.create_datetime)}</TextCell>
          <Split />
          <TextCell>减/缓情况：{d.remark1 || '无'}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell>交费原因：{d.description || '无'}</TextCell>
        </TextLine>
        {this.renderPay(d)}
        {this.renderFile(d.file)}
        {this.renderOperateBtn(d)}
      </ApproveBlock>
    )
  }
}

BillTextBlock.proptypes = {
  data: PropTypes.object,
  types: PropTypes.array,
  applicants: PropTypes.array,
  respondents: PropTypes.array,
  onFinish: PropTypes.func,
  editable: PropTypes.bool,
  modifyHandle: PropTypes.func,
  decideHandle: PropTypes.func
}

BillTextBlock.defaultProps = {
  data: {},
  types: [],
  applicants: [],
  respondents: [],
  onFinish: () => {},
  editable: false,
  modifyHandle: () => {},
  decideHandle: () => {}
}
